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<1*2 And «*•> 



P.O. Numban <*•*> CD 



Purport: <*■*> <Z> <to*>Typ>: «ct>CD 



otrf>DaU: <tatf> 



<ten>(i«fi] 



<tad>{M*t«r] 


Oty Ordered 


Unft 


Unit Prlct 


<htS> 

<Mtf for popup topr t> 

<Z> 


<la*>(T) 


Oat><J2> 


<tett>|<tal>(22> 
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<PurchaseOrder> 

<P0Number> 1200 </P0Number> <Purpose> Original </Purpose> 
<Dote> 980116</0ote> <Type> Stond-olone Order <Ayp»> 

/ ^<Un«ltem> 

( <l»emN0> 0001 </l»emN0> <QuanHty> 1 </Quantfly> 

120 <Un«> Box </Unll> <Un!tPrtee> 5.29 </lMPrlce> 
<PraductServlce> 

<ServlcelD> 79845 </Servlcet0> 

<ServteeDescrtptlon> Vendor (Sellers) Port Number </Servk»Descrlption> 
</ProdudServict> 
<ProductServtce> 

<ServtcelD> 0 </ServteelD> 

<ServlceDeseription> Purchase Item Code </ServlceOeecriptlon> 
</ProdudSer¥lce> 

<ProductDescriptlon> <Format> free </Format> 

<De$crfpHon> OIBussiness Cards </0escription> 
</ProdudDescription> 

<rVoductDescriptlen> <Formal> Free </Formal> 

<Description> 02Research Staff Uember, Manager </0escriptlon> 
</ProdudDescrtptlon> 

<Address> . 
<Parly> Ship To </Party> <Mame> IBM TJ Wotson Research Center </Name> 
<Street> PO Box 704 (Hawthorne) </Street> <Oty> YorWown Heights </Ctly> 
<State> NY </State> <ZlpCode> 10598 </ZIpCode> 
</Address> V 
</UneHem> ^~10S 
f <Uneltem> 

( <ltemN0> 0002 </ltemN0> <Quan«ty> 20 </QuantHy> 
126 <UnH> Case </Unl»> <UnltPrice> 20X0 </UnltPrlce> 
</UneHem> 
_ <Address> 

C <Porty> Blll-to-Porty <Nome> IBM Corporation </Name> 

121 <AddlHonalName> Account Payable </AddttionalName> 
<Street> PO Box 9005 </Street> <Ctty> Endicott </CHy> 
<State> NY </Stote> <ZlpCode> 13761 </ZIpCode> 

</Address> 
<Address> 

<Party> Selling Party </Party> <Nome> Corporate Graphics </Name> 
<Street> One Stationery PI. </Street> <CHy> Rexburg </Clty> 

129 <Stote> ID </State> <2IpCode> B3441 </ZipCode> 

I </Address> 

^-tfotalAmounfr 205.29 </TotalAmotmt> f\Q m | 
</PurchoseOrder> 
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200 

<!D0CTYPE PO [ y 
<!EIEMENT 0 PurchoseOrder (PONumber Purpose Dote Type UneHem* Address* 

TotolAmount)> 
<!EL£MENT / PONumber ( f PCDATA ) > 
<IEL£MENT 2 Purpose ( fPCOATA ) > 
<!EL£UENT 3 Dote ( fPCDATA ) > 
<!El£UENT 4 Type ( f PCDATA ) > 

<!EIEMENT 5 Uneltem ( HemNO Quantity Unit UnHPrice ProdudService* 

ProductDescrfption* Address 0 ) > 
<IELEMENT 6 Address ( Party Name AdditionalName? Street Street2? 

CHy State ZlpCode ) > V 
<IELEMENT 7 TotalAmount ( fPCDATA ) > ^\ 
<!ELEMENT 8 HemNO ( fPCDATA ) > 210 
<!ELEUENT 9 Quantity ( /PCDATA ) > 
<!E1£MENT 10 Unit ( f PCDATA ) > 
<!ELEMENT / / UnltPrtce ( fPCDATA ) > 
<1ELEMENT 12 ProdudService ( Service© ServiceDescripfion ) > 
<IELEMENT 13 ProductDeserlption ( Format Description ) > 
<!ELEMENT 14 Party ( fPCDATA ) > 
<!ELEMENT 15 Name ( fPCOATA ) > 
<!ELEMENT 16 AddHionalName ( fPCOATA ) > 
<IELEMENT 17 Street ( fPCDATA ) > 
<1ELEMENT 18 Street2 ( fPCDATA ) > 
<1ELEMENT 19 CHy ( fPCDATA ) > 
<!ELEMENT 20 State ( fPCDATA ) > 2 20 
<!ELEMENT£f ZipCode ( fPCDATA ) > J 
<!ELEUENT 22 ServieelD ( fPCDATA ) > f 
<!ELEUENT 28 ServiceDescripflon ( fPCOATA ) > 
<!ELEMENT 24 Format ( fPCDATA ) > 
<IELEMENT 25 Description ( fPCOATA ) > 

]> 



FIG. 2 
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Sample Purchase Order ^401 



P.O. Number: 1200 


Date: 980116 


Purpose: Original 


Type: Stand-alone Order 



P0 Une Item § 


Qty Ordered 


Unit 


Unit Price 


OOOI 


1 


Box 


$5.29 


0002 


10 


Case 


$20.00 



435 



415 



IN 



Bm-to-Porty 



427 



Hams 


|IBM Corporation \ 


Additional 
Noma 




■ Account Payabls 1 




Add ran 


IPO Box 9005 \ 


Additional 
Address 




' 1 1 




cwy 


lEndlcott / , 1 


Stats 


|™=«—nl 


Postal Cod* 


113761 \ 1 



426 



Selling Party 



Nome \ 


| Corporate Graphics | 


Additional 
Name 




r i 




Address 


|One Stationery PI. 1 




Additional 
Address 


■ / > 


CHy 


iRtxburg 


T 1 

r 1 


Slafe 


1 Idaho 


.r iTl 


Postal Code 


irnsmi 


\ 1 



426 



Total Monetary Amount: $205.29 



FIG. 



430 



5 



425 
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PO Line Item Detail 



Line Item No: 0001 


Quantity Ordered: 1 


Unit of Measure: Box 


Unit Price: $5.29 


Product/Service ID 


Product/Service 
ID Descriptor 


79845 


Vendor (Sellers) Part Number 


0 


Purchase Item Code 



^450 

Product Description 



Ship To 

IBM TJ Watson Research Center 
PO Box 704 (Hawthorne) 
Yorktown Heights, New York 10598 



FIG. UB 
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Detailed Product Description 


Format 


Description 


Free 


01 Business Cards 


Free 


02Research Staff Member, Manager 







FIG. hC 



02/22/2004, EAST version: 1.4.1 



U.S. Patent Dec. 23, 2003 Sheet 7 of 14 



US 6,668,354 Bl 




02/22/2004, EAST Version: 1.4.1 



U.S. Patent Dec. 23, 2003 Sheet 8 of 14 US 6,668,354 Bl 



State 


Abbreviation 


Alnhnmn 


AL 

flu 


Mi l£UilU 


A2 

MIL 






launo 


ID 






New York 


NY 






Wyoming 


WY 



USStates 



FIG. 6 
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<text>[left] 



<toxt> 

P.O. Number. <*•*> CD 


<t«xf>Date: <t«i> CZ> 


<t«xt> , 

Purpose: <*•*»> CD 


<t«xt>Type: , <ttxt>(3D 



778 



<tat>[ctnter] 
PO Line Item § 

[•mpty] 


<text>f center) 

Oty Ordered 


<text>[center] 

Until 


<text>[center] 

Unit Price 


<text> 

<K«y for popup loytr 2> 

<£> 


<text>CD 


<t»«t><22> 


<tixt>$<t«rt><27> 



<row 



^ <text>[bold][span 2 columns] (Q) (path) — - 


<text>[left] Name 


<lnput text f1«ld> (P 0 *") 


<text>[lefl] AddHlonal 
<text>[leftj Name 


<lnput hut fteld> (path) 


<text>[left] Addrm 


<tnput text fleld><2> (P 0 *) 


<ttxt>[ltHl Additional 
<text>[left] Addrm 


<lnput text fi«ld>(2> (po*) 


<tfxt>[left] CHy 


<lnput text fleld><g) (P 0 *) 


<text>[lefl] Stoto 


<seleet box> Q§) (path) 

[using USStates table for name expansion] 


<toxt>[loft] Postal Cod* 


<lnput text fleld>(|2> (path) 



735 



■774 



740 



<text> 



Total Monetary Amount: $<ta«t>[»oBc]<2> 

FIG. 7A 



74S 
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<loy«r>[2]<2} FIG. 7B 

<»«t>MiP0 Line Item Detail 

<2x2 fixed tablo> 



<ttxt>[ltft] 

Line Item No:<t«xt> CS> 


<tact>[kft] 

Quantity Ordered: <t«t> C£> 


<toxt>[ltH] 

Unit of Measure: <t«xt> O) 


<t«xt>(l«ft] 

Unit Price: $ <t«xt> <Q> 



<»»xt>[c«nttr] 

Product/Service ID 


<text>[c«nt«r] Product/Service 
<t«xt>[oent«r] ID Descriptor 


<t»xi>[c«nt»r] <||> 


<t«xt>[c«nter] <g§) 



780 



<tsxt>[k»y for popup layor 3] 

Product Description ^ 

<1 -column row-rapaotlbU tobl»>[wHh bordor Itntyrith out Internal lines] CT>0>^h) 

<toxt>[laft,bold] <J2> 
<row>{empty] 
<tMt>[l«fl] <2> 
<text>[l«ft,op«onal] 
<text>(le«] <g> 
<teit>[lel»,op«onol] <Q> 
<text>(U«]<2g)<t«j<t>, <t«t> d^)<t»xt><^) 



<layer>(3] (Q> 



FIG. 7C 



(rTir, 1 ^'""* P™«uo» Description 


<t6xt>[iaft.boid] Format 


<uxt>[itft,boid] Description 


<Uxt>[l»«] 


<tat>[Wt] <^> 
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prinL6(n) | ^810 
documented '<TABl£>'); f 

docum»nt.wr«e("<Tfi><TO SPAN= , 2 , >'+ prinL14(n) + V/TDx/IR/); 
docum8nt.wrfle("<TR><T0 AUGNs'left^Name </TDXTD>>prinU5(n)+'</TDXTR> ); 
document.write( m <TRxTD AUGM='left'> Additional Nome </TOXTD>"+prlnL16(n)+ 
"</TD></lR>"); 

document.wrlte("<TRxTD AUGNs'lef^Address </TDxT0>"+prinL17(nK<AD></TR> ): 
documonf.wrfle("<TRXTD AUGNs'left^Additional Address </TDXTD>'+prinL18(nH 
"</TO></TR>"); 

document.wrttefVTRxTD AUCM= , loft , >CHy </TDxT0>>prinL19(«K</n>xAj£); 
document.wHte("<TRXTO AUGNs'left^Stote </n»<TD>'+prinL20(n)+ '</T0X/TO> ); 
document.wrttt("<TRXTD AUGNs'left^ Postal Codt </TDxTD>"+print_21(n)+ 

</TOX/TR>'); 
documen*.wriieC<TABL£>'); 

* ^820 

prinL14(n) | 830 

foroll (m=n.children) 
If (m.tag== "PARTY") | 
// with hidden triable encoding layers thai the component con be on, 
// If if can appear on other layers than the main layer.such as 
// "<INPUT TYPE='HIDDEN' NAME="+ m.tog + *ID=' , +creot«ID(in) ♦ *VALUE='* 
// m.volue+'V; 

return VlNPUT TYPE=*TEXfNAME='*+ m.tog + ■"ID='4creofelD(m) ♦ 
"VALUE^+m.volue*"/; 

I 

I 

\ ^870 

print_20(n) | aSQ 
foroll (m=n.chndren) | ^ ^880 



if (m.taa== 'STATE*) { , 

return expand_for_select(m.value, USStates); 



I 

I 

I 



FIG. 8 
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AUTOMATIC DISPLAY SCRIPT AND STYLE 
SHEET GENERATION 

BACKGROUND OF THE INVENTION s 

1 . Field of the Invention 

The present invention relates to display script and style 
sheet generation and, more particularly, to a Graphical User 
Interface (GUI) tool for automating the generation of display ]0 
script and style sheets. 

2. Description of the Related Art 

An extensible Markup Language document (XML) may 
be displayed to a browser using Javascript, style sheet 
languages such as extensible Stylesheet Language (XSL) * 5 
and Cascading Style Sheet (CSS) or a combination thereof. 
The creation and maintenance of style sheets can be quite 
tedious and error prone, due to complicated style sheet 
language constructs. Furthermore, trading partners may 
need to create their own display style sheets for returning 20 
document generation in response to a previously received 
document, e.g., an invoice can be generated in response to 
a purchase order (PO), and a reply to request for quote 
(RFQ) in response to an RFQ etc. 

Therefore, a need exists for a Graphical User Interface 25 
(GUI) tool for automating the generation of display script 
and style sheets. A further need exists for a system and 
method for creating documents and displays over the Inter- 
net which reduce potential human error, and allow trading 
partners to conduct on-line negotiations over display lay- 30 
outs. 

SUMMARY OF THE INVENTION 

A system for automatically generating a style sheet 35 
includes a parser for generating a document type graph in 
accordance with an input style or structure, a graphical user 
interface tool for interactively mapping the document type 
graph to form a display template in accordance with user 
requirements and a script generator for generating the style 40 
sheet in accordance with the graphical user interface and the 
design template. 

In alternate embodiments, the input structure is preferably 
a data type definition (DTD)writtcn in extensible markup 
and language (XML). The parser may be a data type 45 
definition parser and the document type graph may include 
a data type definition (DTD) graph. The document type 
graph preferably includes nodes representing data types. The 
nodes are capable of being manipulated such that the data 
type represented by the node is represented at a location to 50 
which the node is manipulated. The nodes are capable of 
having their properties altered by graphically activating the 
nodes of the graph. The system may further include abbre- 
viation tables for converting abbreviations of the document 
type graph to full text to be displayed. The system may 55 
further include pop-up windows and layers provided by 
activating predetermined portions of the style sheet. The 
system may further include dynamic tables having dimen- 
sions which arc determined upon rendering of the tables. 

A program storage device readable by machine, tangibly 60 
embodying a program of instructions executable by the 
machine to perform method steps for automatically gener- 
ating style sheets, the method steps include compiling an 
input structure to provide an arrangement of data types, 
manipulating the data types by a user to place the data types 65 
into a graphical layout for display and automatically gener- 
ating a style sheet for interacting with users. 



J54 Bl 
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Another program storage device readable by machine, 
tangibly embodying a program of instructions executable by 
the machine to perform method steps for automatically 
generating style sheets, the method steps include compiling 
an input structure to provide an arrangement of data types in 
one of a node tree format and a table format, manipulating 
the data types by a user to drag and drop the data types into 
a graphical layout for display and automatically generating 
a style sheet for interacting with the user, the style sheet 
having a hierarchical architecture including at least one main 
layer having sub-layers and windows for providing addi- 
tional information about components of the at least one main 
layer. 

In other methods, the program storage device may further 
include the step of employing a single data type in multiple 
places in the style sheet. The program storage device may 
further include the step of assigning different tag names to 
the single data type for each place in the style sheet in which 
the type is used. The arrangement may include one of a table 
and a node tree. The program storage device may further 
include the step of providing full text expansion for data 
types entered by the user as abbreviations. The program 
storage device may further include the step of selecting rules 
for display styles such that the display of the style sheet is 
governed by properties selected. The program storage 
device may further include the step of applying code for 
components of the style sheet such that the display of the 
style sheet is governed in accordance to the code. The 
program storage device may further include the step of 
providing pop-up windows and layers which are invoked by 
a user. The program storage device may further include the 
step of passing variables between layers using hidden fields 
and labels. The program storage device may further include 
dynamic tables having dimensions which are determined 
upon rendering of the tables. 

These and other objects, features and advantages of the 
present invention will become apparent from the following 
detailed description of illustrative embodiments thereof, 
which is to be read in connection with the accompanying 
drawings. 

BRIEF DESCRIPTION OF DRAWINGS 

The invention will be described in detail in the following 
description of preferred embodiments with reference to the 
following figures wherein: 

FIG. 1 depicts a sample XML document encoding a 
purchase order for use with the present invention; 

FIG. 2 is a data type definition (DTD) for the sample 
purchase order shown in FIG. 1 for use with the present 
invention; 

FIG. 3 is a graphical structure of the DTD of FIG. 2 in 
accordance with the present invention; 

FIGS. 4A-4C show a main layer and two pop-up 
windows/layers, respectively for rendering the sample PO 
XML document of FIG. 1 in accordance with the present 
invention; 

FIG. 5 is a schematic diagram of the windows/layers and 
operation sequences that may occur, for applying the display 
strategy illustrated in FIGS. 4A-4C to the XML document 
depicted in FIG. 1 in accordance with the present invention; 

FIG. 6 is an illustrative abbreviation table for US States 
for use in accordance with the present invention; 

FIGS. 7A-7C depict the sample layouts that a graphical 
user interface can arrange according to user options in 
accordance with the present invention; 
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FIG. 8 is a style sheet that is generated for the display grouping/hiding certain data elements, only syntactically/ 

layout of FIG. 7A in accordance with the present invention; scmantically related elements may be assigned to the same 

FIG. 9 is a flow/block diagram showing an automatic style layer, 
sheet generation method/system in accordance with the The basic mles for style sheet design include the fol low- 
present invention* s stc P s: ( a ) contaiQcr creation (layouts, tables, rows etc.), 

, , , (b) component assignment (using drag-and-drop, option 

FIG. 10 is a block diagram showing a generated style sc!cction§ or texl input)f (c) container layout and displace- 

sheet and input data type definition (DTD)for displaying mem for layerSj frames, tables, texts and data elements 

XML documents conforming to the input DTD m accor- (types), (d) component display properties (fonts, lext/input 

dance with the present invention; and fi e ids f select options etc.). The above steps can be repeatedly 

FIG. U is a flow/block diagram showing a graphical user applied to create a nested container hierarchy such as a table 

interface method/system in accordance with the present inside a layer, a row in a table, an entry in a row, a text field 

invention. aQ d a drag-and-drop data element in an entry. 

The GUI tool connects all the other tasks together, and 

DETAILED DESCRIPTION OF PREFERRED bridges between the end users and the style sheets. By 

EMBODIMENTS 15 serving as a front -end, the tool provides many user-friendly 

The present invention relates to display script and style such as drag-and-drop, options listing data field 

sheet generation and, more particularly, to a Graphical User editing, and layer semantics checking. The tool also invokes 

Interface (GUI) tool for automating the generation of display * n automatic code generation process so that the entire style 

script and style sheets. For the present invention, an entire M sheet design/generation procedure and the style sheet itself 

XML document may be treated as a Document Object can be transparent to the users. 

Model (DOM) tree, ref. Document Object Model (DOM) For foe present invention, Javascript and XSL compo- 

Level 1 Specification Version 1.0, W3C Proposed nents may be placed in a form to simplify their use in the 

Recommendation, Aug. 18, 1998, whose elements can be automation process. The following page objects and display 

manipulated to fit into a Web page using Javascript and/or ^ functions may be included. 

style sheet. A Graphical User Interface (GUI tool) is used to A multi-layered design using pop up windows or frames 

assist web page layout and table arrangement. Similar to a has been included to provide (1) how to invoke a new layer 

code generation phase in a modern compiler, partial script or or frame, and(2) what data types should be included in 

a style sheet is generated corresponding to a specific layout specific layer or frame. Tag expansion/mapping from a 

selection. The invention includes style sheet generation by 30 server site abbreviation table repository is provided to 

performing several tasks, for example: (1) utilize an existing perform (1) binary search functions on large tables, (2) 

parser for generating a Data Type Definition (DTD) graph, linear search functions for small tables with no more than 4 

(2) prepare style sheet commands or code for a code entries, and (3) given an XML field value, replacement with 

generation process, to create individual components, to the XML field value's full description from the abbreviation 

generate specific styles, and to invoke certain functions, (3) 35 table repository, using either binary search or linear search, 

define customized abbreviation tables, and methods to Document object manipulation is provided for(l) unique 

access well-known pre-defined abbreviation tables, (4) identification (ID) creation by recursion, using relative posi- 

specify allowable rules for component creation procedures/ tion in a document object model (DOM) tree, (2) object 

restrictions and displaccment/outlook/format design and (5) display properties, e.g., font size, font type, underline, and 
arrange a GUI tool for examining/manipulating the DTD 40 color. 

graph, enforcing the allowable rules, and invoking the code Simple form types have been provided, such as,(l) simple 

generation process to produce the style sheets. text display, (2) associate current document object 

A DTD parser is to generate and display a graph, which information, e.g., ID, lag name, value, layer/frame etc., by 

is useful to the GUI tool for providing user-friendly features defining variables, and (3) tag expansion/mapping. Editable 
such as drag-and-dropping a node of the DTD graph to a 45 f° rm lv P es * re provided, such as, (1) input field, blank or 

table entry, and double-clicking on a node for selecting pre-filled with text, (2) select with options-initial selection 

options. Common components and display styles may be from a default string, or using the XML field value, (3) radio 

treated as objects and properties. Style sheet commands to buttons, (4) check boxes, etc. XML document reconstruction 

achieve specific display effects, to invoke certain mathemal- is also provided for (1) original documents, and (2) updated 
ics functions, and to establish relations between components 50 documents. Table formatting is included for (I) table lags 

(e.g., for passing parameters between layers) may be coded generation, (2) table layout, e.g., one table per row, or 

separately in advance under different style sheet scripts. The multiple tables per row and (3) tables inside a table. DOM 

XML documents may include abbreviations for certain data loop items manipulation is provided to (1) display one 

elements (e.g., in US states, "NY" stands for "New York"). iteration of loop types in a separate table, (2) display one 
Allowing the usage of abbreviation tables can save the 55 »YP C of loo P in a i*hk f with each iteration occupying a 

document size considerably, providing that such tables are separate row, (3) display only partial information for each 

common and easily accessible. loop iteration, where key fields with highlighted click 

Efficient style sheet commands implementing binary «n pop up windows or frames for more detailed 

search for tabic matching and data expansion may improve loop displaying. Calculations arc included for (1) sum on 
the display speed when XML documents arc rendered to 60 column/row for some tags, and (2) math formulas on mul- 

browscrs using the style sheets. Simple rules governing the "pl c columns/rows. 

precedence rclatioas or ordering among components may be The previously described page objects and display func- 

enforccd to ensure logical user-friendly operation lions may be employed with the present invention. Other 

sequences, and to perform basic syntax/semantics checking. page objects and display functions may be used in addition 
For example, a style sheet designer can issue an "add one 65 to or instead of those described. 

row" command only when a specific container (a table in The invention will now be described in detail by way of 

this case) exists. Also when creating a new layer for an illustrative example. The illustrative example is not 
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limiting. Referring now to the drawings in which like Description" 450 in FIG. 4B is used to pop up the third 

numerals represent the same or similar elements and initially window (FIG. 4Q to hide extra information such as infor- 

to FIG. 1, a sample XML document is depicted for encoding mation in accordance with ProductDescription 13 of FIG. 2 

a Purchase Order (PO), where there are two items ordered, ts shown in FIG. 4C. 

i.e., item Nos. 0001 and 0002. Each item includes informa- s A US states table, as shown in FIG. 6, is used to expand 

tion code which begins at line items (Uneltem) 120 and mc abbrcvialion of stales sucn as "ny" to its full name 

(Uneltem) 125, respectively. Line item 120 includes "New York". For example, the abbreviation "NY" is entered 

detailed product descriptions, service types, and ship to ^ ^ ^ ^{^^ ^ numeraJ 105 m nG. 

address and the line item 25 ^\^ ^y ^ I, a script code compares the abbreviation to an array (FIG. 

information, such as price, quantity and unit. Other intor- *r " - . c u . * r \ * 

mation is included, for example, address information 121 10 <0 and W^toMgwtom to full text, for example at 

and a total amount of the purchase 123. numcral m of nG - 48 

Referring to FIG. 2, a Data Type Definition (DTD) for the Referring to FIG. 5, possible windows and operation 

sample PO of FIG. I is shown. DTD defines 26 data types sequences that may occur for the style sheet of toe present 

(0-25). The Address data type 6 is referred by the data types , . example are schematically shown. The line item with num. 

Purchase Order 0 and Lineltem 5, where Lineltem itself is *>er 0001 can create one window 510 to explain the basic 

referred by PurchaseOrder 0 as indicated by the numeral information about the Hem, which in turn can spawn the 

200. Repeatable data types are marked with a e.g., the window 515 for more detailed item description. The 

Lineltem indicated by 200 referred by PurchaseOrder 0, and ^ to* numbered 0002 can create a window 520. TTjestyle 

optional data types which can occur never or once are , n sh«t should not generate the key text 450 (FIG. 4C) for 

marked with a "?", e.g., AdditionalNamc indicated at spawning layer 3 if no ProductDescription data element is 

numeral 210 referred by Address 6. The "#PCDATA" 220 available for the current item, as in the XML document 

represents parsed character data. The style sheet written in, depicted in FIG. 1. 

for example, Javascript, XSL, or CSS provides a way to Referring to FIGS. 7A-7C, sample display templates or 

render any XML document (e.g., FIG. l)with the same DTD layouts are shown which are arranged according to user 

(FIG, 2) to the browser. option of a GUI algorithm. The algorithm can generate a 

The present invention provides an automatic style sheet slyle sheet which renders any XML document that has the 

design process by providing user-friendly features and auto- input structure DTD, e.g., the XML PO in FIG. 1 and the 

malic generation schemes. Based on the DTD (FIG. 2) this DTD in FIG. 2, to achieve the display effects as depicted m 

disclosure will describe automatic style sheet design process 30 FIG. 5. FIGS. 7A-<: show a nested container hierarchy that 

in accordance with the present invention. * enforced by the GUI process in accordance with the 

Referring now to FIG. 3, the DTD of FIG. 2 is depicted invention, 

in a graphical structure. Oval-shaped nodes 300 represent A user may create a main layer 705, and associate with it 

data types. Each data type corresponds to the data types of the node, PurchaseOrder 0 indicated by the oval with a zero 

the same number (or symbol) as indicated in FIG. 2. Arrows 35 in it, using drag-and-drop as shown by the ovaUbaped 

310 from data types (for example, data type X, not shown) nodes for the DTD graph shown in FIG. 3. Then the user 

to another data type (for example data type Y, not shown) are may determine how to place the layer when its window is 

drawn, if X referred Y during X's definition. A*"" within a popped up, and assign the background color for the layer 

node represents a repeatable data type, for example type using CSS, for example. The user may create three table 

320, and a "7" within a node represents an optional data type 40 containers 770, 772, 774 within the main layer, with optional 

330, i.e., a data type which may not be needed for processing text containers 776, 778 as the table captions. Using drag- 

the PO, such as a second street address. The Address data and-drop, the user associates a node with each table. The 

type 6 has been referred twice, once by PurchaseOrder 0 and user may choose the displacement properties (e.g., 2 tables 

once by Lineltem 5, respectively. The DTD graph of FIG. 3 per row 750) and outlook (e.g., no internal lines 780 in FIG. 

Is employed to simplify data processing in accordance with 45 7B) for these tables. For dynamic tables, the user may issue 

the invention. In this way, data types may be mapped and "add a row" command to create a new row container. The 

visited more efficiently. uscr mav create components within a column 720, 735, or 

Referring to FIGS. 4A^C, an illustrative screen (FIG. spanning multiple columns 715. Text or data type compo- 

4A) and two pop-up windows (FIGS. 4B and 4C) are shown nenls with keys can be used to pop up extra layers 725. The 

for rendering the sample PO XML document shown in FIG. 50 uscr ma V also havc °P Uons to ex P an ? data { ^ c ° m P oncnls 

1 . FIG. 4A illustratively includes three different table styles. with either user-defined or predefined name tag abbreviation 

A 2x2 fixed table 405 shows the basic PO information t^lcs 740. Sometimes there is a need to specify the exact 

including PO number, purpose, date, and type. The P«U» torn the root node to the current node to uniquely 

4-column row repeatable table 410 lists a summary of the identify the data type with multiple ancestors, e.g. Address 

line items, where each row represents a different line item, ss ^ 

A box 435 serves as a key to spawn a second layer (FIG. 43) The GUI provides the hill path for a component 730 in 

which hides more detailed line item information. A addition to the drag-and-drop actions. The user may have 

2-column table 415 displays the Address type 6 under options of choosing properties (e.g., italic font 745), and 

PurchaseOrder 0, and there can be two tables side by side in displacements (e.g., center 710). 

a row. The table may include editable input text fields 426 60 Referring to FIG. 8, a sample style sheet is illustrated 

with or without default values 425 and 427, respectively, or which may be generated for the display layout of the table 

a select field 420 with a default option shown. Component 774 as illustratively depicted in FIG. 7A. The sample style 

properties can be altered using CSS, for example, in the sheet shows a way to render the table 415 as depicted in FIG. 

displays, e.g., the TotalAmount clement 430 has an italic 4A using Javascript -like language. For simplicity, a "forall" 

font. 65 840 is employed to represent a "for" loop, which can be 

In addition to regular data types, the fixed text may be more involved in a Javascript language. The style sheet is 

used to spawn a new layer. For example, the text "Product hierarchically designed. The table container has a corre- 
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sponding routine print_6( ), which prepares printing (he lo a table entry, and double-clicking on a node for selecting 

table and individual rows with attributes 810, and calls options in block 922. Common components and display 

several routines to print the children nodes, recursively. For styles may be treated as objects and properties. Style sheet 

example, print_14(n)820 basically returns a string that can commands to achieve specific display effects, to invoke 

display a text input field with a default value from the child 5 certain mathematics functions, and to establish relations 

node with tag name 830. The routine print_20(n) 870 between components (e.g., for passing parameters between 

returns a string representing a select component, and calls layers) may be coded separately in advance under different 

the routine cxpand_for^select ( ) 850 for siring matching stylc sncct m bIock 914 !n block 915, mc XML 

and expansion using the abbreviation table USStates 860. documents may include abbreviations for certain data types 

Using the expansion table name as a parameter advanta- 1Q ^ g ^ m us statcs> sUnds for « Ncw York")- Allowing 

geously permits implementing more complicated features. me Ufiage of abbreviat i on tables can save the document size 

To display name tag expansion as a default value in a considerably, providing that such tables are common and 

regular text field or input text field, a matching algorithm is easily accessible. 

preferably implemented as a binary search routine to speed EfficieQt A . SQeet implementing binary 

up the XML document rendering process. Such binary 15 scarcfa for malching ^ data expansion may improve 

search routine and the expansion table internal I representa- ^ . . XML documents are rend ered to 

tion as depicted in FIG. 6 can be coded in advance, and browsers lne slyle sheets. Simple rules governing the 

referred during script generation. precedence relations or ordering among components may be 

It should be understood that the elements shown in FIGS. enforced to ensure logical user-friendly operation 

9, 10 and 11 may be implemented in various forms of 20 sequences, and to perform basic syntax/semantics checking, 

hardware, software or combinations thereof. Preferably, Fof cxwnp i e( a sty i e sheet designer may issue an "add one 

these elements are implemented in software on one or more row - command only when a specific container (a table in 

appropriately programmed general purpose digital comput- thifi cafie j exists creating a new layer for 

ers having a processor and memory and input/output inter- grouping/hiding certain data types, only syntactically/ 

faces. In preferred embodiments, input interfaces include a 25 semantically related types may be assigned to the same 

mouse and appropriate software to provide functions such as j avcr 

clicking on icons, drag and dropping, etc. Referring now to ^ ^ ^ for ^ ^ ^ fo|kjw _ 

f , 9 ' aD TTu f le Shect generation systemymethod ^ ^ 

is shown. TTie dashed arrows represent ^ control flow * component assignment (using drag-and-drop, option 

whUe solid arrows denote data flow and user interactions. A 30 ^ J qt { ) ^ f { md ^phec- 

GU1 tool 910 allows the users to create containers ' ^^ables, texts and data types, (d) 

components, to associate data types with specific containers/ ^ { ^cs (fonts, text/input fields, select 

components using drag-and^irop or double click, to decide * The above steps can be repeatedly applied to 

where and how to place the containers, and to assign ^ ^ J ^ a J^/^ a 

properties to containers/components. Such procedure can be 35 & ^ ^ a ^ in a a ^ fidd ^ a 

repeated to produce a hierarchical set of containers/ * dala lypc in an cntry . 

components, unUl the users finish the design process. The * ; ,r ' 

script generation process, much like the code generation GUI tool 910 connects all the other tasks together, and 

process in a compiler (parser), may then be invoked to bridges between the end users and the style sheets. By 

produce the style sheet based on the user design. 40 scrvin & 35 a Retool provdes many user-fhend y 

A document stru Cl ure(DTD), preferably written in XML, su <* as drag-and-drop options listing . dttafieW 

• a a • ui I imi a a t *™ ;« fnm, editing, and layer semantics checking. The tool also invokes 

is provided in block 902. A document type graph in the form ' 0 , . , 

of a DTD graph is created by a parser 912. The nodes of the « automatic code generation process so that the enUre style 

DTD graph may be manipulated to form a Web page display sheet oesigr^generaUon procedure and the style sheet itself 

template, for example, which is used to generate the style 45 can bc ^P*™' *> ^ «*ers. 

sheet. In block 910, a Graphical User Interface (GUI tool) is Referring to FIG. 10, a generated style sheet 924 and a 
used to assist web page layout and table arrangement. DTD 902 are used to render three XML documents 1011, 
Similar to a code generation phase in a compiler, partial 10L2. 1013 into three different displays 1051, 1052 and 1053 
script or a style sheet is generated corresponding to a specific which conform to the provided DTD 902 structure, 
layout selection in block 906. The invention includes style 50 Referring to FIG. 11, a GUI tool 910 accepts user input, 
sheet generation as output in block 924 by performing generates a display template and passes the display template 
several tasks, for example: (1) utilize a parser 912 for to a script generation process in block 906 for automatically 
generating a Dala T\pc Definition (DTD) graph, (2) prepare generating a style sheet. GUI tool 910 may implement the 
style sheet commands or code for a code generation process, following algorithm. In block 1110, a DTD graph is 
to create individual components, to generate specific styles, 55 displayed, with markers on loop header nodes ('**) and 
and to invoke certain functions in blocks 914, (3) define optional nodes ('?')• In a block 1120, the user may choose 
customized abbreviation tables, and methods to access well- 10 create a container. If no more containers are to be created, 
known pre-defined abbreviation tables in block 916, (4) the algorithm enters the script generation process in block 
specify allowable rules for component creation procedures/ 906 for producing the style sheet. Otherwise, the algorithm 
restrictions and dlsplacement/outlook/format design, in 60 performs the steps in blocks 1130, 1140, 1150 and 1160 until 
block 920 and (5) arrange GUI tool 910 for examining/ there are no more containers to be created. In block 1130, the 
manipulating the DTD graph, enforcing the allowable rules, user may select the type of containers) to create. New 
and invoking the code generation process to produce the containers may include a pop-up window or frame, a new 
style sheets. table (Oxcd or dynamic), a compound element and/or a static 
D ID parser 912 generates and displays a graph, which is 65 clement. A static element is an element without sub- 
useful to the GUI tool 910 for providing user-friendly containers. A compound element may include text fields and 
features such as drag-and -dropping a node of the DTD graph a combination of other container types, and may form a 
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hierarchical layout. A dynamic table is a special container and desired protected by Utters Patent is set forth in the 

with extensible rows and columns. The number of actual appended claims, 

occurrence of a repeatable item is unknown at style sheet What is claimed is: 

design time. With extensible rows and columns, the CUI tool 1. A system for automatically generating a style sheet 
can show one row or column, and the table can be expanded 5 comprising: 

during document rendering time to achieve the correct size. a parser for generating a document type graph in accor- 

In block 1140, for each container created, the user may dance with an input structure; 

drag-and-drop a node of the displayed DTD graph, say node a graphical user interface tool for interactively mapping 

R, to associate with the container, such that only nodes on the document type graph to form a display template in 

the sub-graph rooted at R and nodes semantically related to 10 accordance with user requirements; and 

R may appear in the current container. For static elements, a generator f or generating the style sheet in accor- 

the user can only drag-andndrop those nodes which are dflnce ^ thc graphical uscr i Dl erface and display 

semantically unique under the container to be created. For template. 

specific data types, options are provided to view/display all 2 . The system as recited in claim 1 wherein the input 

the valid values, in both shorthand notations and full stni cture is a data type definition (DTD) written in exten- 

descriptions. The abbreviation table repositories on the sible markup an d language (XML), 

server site or local desk may need to be retrieved, and a list 3 ^ sysU > m as recited in claim 1 wherein the parser is 

of abbreviation tables may be provided. Modification may a djUa typc definition parser and thc document type graph 

be made after selecting the abbreviation table. includes a data type definition (DTD) graph. 

In block 1150, options are provided for the user to arrange 4, f^e system as recited in claim 1 wherein thc document 

the container layout and displacement. For example, type graph includes nodes representing data types, 

although the number of repeatable items, e.g., tables and 5. The system as recited in claim 4 wherein the nodes are 

static data, is unknown at this time, thc user can choose to capable of being manipulated such that the data type repre- 

preset the dimensions, for example the number of rows or sentcd by the node is represented at a location to which the 

columns. The user may also adjust the relative location of a no d e is manipulated. 

text element inside a compound container. Other options 6. The system as recited in claim 4 wherein the nodes are 

may be provided as we 11. In block 11 60, options are provided capable of having their properties altered by graphically 

for the user to select the features of the container, e.g., the activating the nodes of the graph. 

background color, font type, font size, text color, etc. ^ 7, The system as recited in claim 1 further comprises 
Having described preferred embodiments for automatic abbreviation tables for converting abbreviations of the docu- 
display script and style sheet generation (which arc intended men! type graph to full text to be displayed, 
to be illustrative and not limiting), it is noted that modifi- 8. The system as recited in claim 1 further comprises 
cations and variations can be made by persons skilled in thc pop-up windows and layers provided by activating predc- 
art in light of the above teachings. It is therefore to be 35 termined portions of the style sheet, 
understood that changes may be made in the particular 9. Thc system as recited in claim I further comprises 
embodiments of the invention disclosed which are within the dynamic tables having dimensions determined upon render- 
scope and spirit of thc invention as outlined by thc appended ing the style sheet, 
claims. Having thus described the invention with the details 

and particularity required by the patent laws, what is claimed * * * * * 
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